<template>
	<view>
		<view class="table-row" v-for="itemC in formConfig" :key="itemC.ID">
			<text :class="['row-label',itemC.IsRequire&&itemC.IsRequire==1?'flag-must' :'']">{{ itemC.Label }}</text>
			<!-- 查询控件 -->
			<view class="row-value" v-if="itemC.Controls =='ExSearchMatch' " @click="searchBase(itemC)">
				<input type="text" v-model="formVal[itemC.ID]" disabled :placeholder=" '请选择' +itemC.Label" />
				<text class="dicon diconsousuo"></text>
			</view>
			
			<!-- 查询常用巡检说明 -->
			<view class="row-value" v-if="itemC.Controls =='ExSearchCY' " @click="searchBase(itemC)">
				<input type="text" v-model="formVal[itemC.ID]" disabled :placeholder=" '请选择' +itemC.Label" />
				<text class="dicon diconsousuo"></text>
			</view>
			
			<!-- 文本控件 -->
			<view class="row-value" v-if="itemC.Controls =='ExTextBox' ">
				<input type="text" v-model="formVal[itemC.ID]" :placeholder=" '请输入' +itemC.Label " />
				<text class="dicon diconbianjishuru-xianxing"></text>
			</view>
			<!-- 数字控件 -->
			<view class="row-value" v-if="itemC.Controls =='ExNumber' ">
				<input type="number" v-model="formVal[itemC.ID]" :maxlength="itemC.MaxLength"
					:placeholder=" '请输入' +itemC.Label " @blur="setPoint(itemC.ID)" />
				<text class="dicon diconbianjishuru-xianxing"></text>
			</view>
			<!-- 扫码控件 -->
			<view class="row-value" v-if="itemC.Controls =='ExScan' ">
				<input type="text" v-model="formVal[itemC.ID]" :placeholder=" '请' +itemC.Label " />
				<button type="primary" size="mini" @click="openScan(itemC)">扫码</button>
			</view>
			<!-- 图片上传 -->
			<view class="row-value" v-if="itemC.Controls =='ExUpload' ">
				<view class="row-img" @click="$utils.previewImage(formVal[itemC.ID])">
					<image :src="formVal[itemC.ID]" mode=""></image>
				</view>
				<button type="primary" size="mini" @click="uploadImg(itemC)">上传</button>
			</view>
			<!-- 枚举控件 -->
			<view class="row-value position-r" v-if="itemC.Controls =='ExEnum' ">
				<picker mode="selector" :range="formVal[itemC.ID+'Range']" range-key="name"
					@change="pickerRange($event,itemC.ID)">
					
					{{ formVal[itemC.ID] || '请选择'  }}
					<!-- <input type="text" disabled :value="formVal[itemC.ID+'Range'][formVal[itemC.ID]].name"
						:placeholder=" '请' +itemC.Label " /> -->
				</picker>
				<text class="dicon diconxiangxiazhankai position-a downIcon"></text>
			</view>
			<!-- 日期控件 -->
			<view class="row-value position-r" v-if="itemC.Controls =='ExDate' " @click="getDateTime('date',itemC.ID)">
				<input type="text" disabled v-model="formVal[itemC.ID]" :placeholder=" '请' +itemC.Label " />
				<text class="dicon diconlog position-a downIcon"></text>
			</view>
			<!-- 日期时间控件 -->
			<view class="row-value position-r" v-if="itemC.Controls =='ExDateTime' "
				@click="getDateTime('datetimes',itemC.ID)">
				<input type="text" disabled v-model="formVal[itemC.ID]" :placeholder=" '请' +itemC.Label " />
				<text class="dicon diconlog position-a downIcon"></text>
			</view>

			<!-- 地址选择 -->
			<view class="row-value position-r" v-if="itemC.Controls =='ExRegion' "
				@click="getDateTime('region',itemC.ID)">
				<input type="text" disabled v-model="formVal[itemC.ID]" :placeholder=" '请选择' +itemC.Label " />
				<text class="dicon diconlog position-a diconditu"></text>
			</view>
			<!-- 读取 -->
			<view class="row-value" v-if="itemC.Controls =='ExReadCard' ">
				<input type="text" v-model="formVal[itemC.ID]" disabled />
			</view>
			<!-- 多行文本 -->
			<view class="row-value position-r" v-if="itemC.Controls =='ExTextarea' ">
				<textarea v-model="formVal[itemC.ID]" auto-height :placeholder="'请输入' +itemC.Label   " />
				<text class="dicon diconbianjishuru-xianxing"></text>
			</view>

			<!-- 扫码+ 查询 -->
			<view class="row-value" v-if="itemC.Controls =='ExScanSearch' ">
				<input type="text" disabled @click="searchBase(itemC)" v-model="formVal[itemC.ID]"
					:placeholder=" '请选择' +itemC.Label " />
				<button type="primary" size="mini" @click="handelScan(itemC)">扫码</button>
			</view>


			<!-- ExCheckMater 物资扫码校验 -->
			<view class="row-value" v-if="itemC.Controls =='ExCheckMater' " @click="handelScanCheck(itemC)">
				<input :class="formVal[itemC.ID]?'text-green':'text-red'" type="text" disabled
					:value="formVal[itemC.ID]?'物资已校验':'请扫码校验物资' " placeholder=" " />
				<button type="primary" size="mini">扫码</button>
			</view>
			
			<view class="row-value" v-if="itemC.Controls =='ExTextSearch' ">
				<slot name="ExTextSearch" :config="itemC"></slot>
			</view>
			
			<view class="row-value" v-if="itemC.Controls =='ExEnumRadio' ">
				<slot name="ExEnumRadio" :config="itemC"></slot>
			</view>
			
			<view class="row-value" v-if="itemC.Controls =='ExScanSBData' ">
				<input type="text" v-model="formVal[itemC.ID]" placeholder="请扫描设备二维码 " />
				<button type="primary" size="mini" @click="openScanSBMater(itemC)">扫码</button>
			</view>
			

		</view>

		<!-- <w-picker mode="range" startYear="2017" endYear="2030" :value="rangeVal" :current="true" @confirm="onConfirm($event,'range')"
    @cancel="onCancel" ref="rangePicker"></w-picker>-->

		<w-picker mode="date" startYear="2017" endYear="2029" value="2020-04-07" :current="true" fields="day"
			@confirm="onConfirm($event,'date')" @cancel="onCancel" :disabled-after="false" ref="date"></w-picker>

		<w-picker mode="date" startYear="2017" endYear="2029" value="2020-04-07 00:00" :current="true" fields="second"
			@confirm="onConfirm($event,'datetimes')" @cancel="onCancel" :disabled-after="false"
			ref="datetimes"></w-picker>

		<w-picker mode="region" :value="defaultRegion" default-type="value" :hide-area="false"
			@confirm="onConfirm($event,'region')" @cancel="onCancel" ref="region"></w-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import wPicker from "@/components/w-picker-v2/w-picker.vue";
	let voluationJson, activeType;

	export default {
		props: {
			formConfig: {
				type: Array
			},
			formVal: {
				type: Object
			},
			formIndex:{},
		},

		data() {
			return {
				activePickerType: "", // 激活的日期字段
				defaultRegion: ["150000", "150100", "150103"] // 默认区域
			};
		},
		components: {
			wPicker
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			pickerDate(e, d, i) {
				let value = e.target.value;
				if (i == 1) {
					this.formVal[d.ID] = value;
				}
			},
			
			setPoint(id){
				this.formVal[id] = Number( this.formVal[id]).toFixed(2)
			},
			// 枚举数据
			pickerRange(e, d) {
				let value = e.target.value;
				// console.log(value, d);
				this.formVal[d] = this.formVal[d + "Range"][value].id;
				this.formVal[d + "Index"] = value;
			},

			// 日期时间选择 wpicker
			getDateTime(t, id) {
				this.$refs[t].show();
				this.activePickerType = id;
			},
			onCancel(e, t) {},
			onConfirm(e, t) {
				let res = e.result;
				// console.log(this.formVal);
				// console.log(res);
				// this.$set(this.formVal,this.activePickerType,res)
				this.formVal[this.activePickerType] = res;
			},

			searchBase(e) {
				// console.log(e);
				this.$emit('searchBaseP', {
					type: e.Other,
					id: e.ID ,
					subIndex: this.formIndex
				})
			},

			// 扫码后查询
			handelScan(e) {
				console.log(e);
				let URL = this.userInfo.BaseURL + '/api/APPCommon/ScanCode';
				// console.log(URL);
				let that = this;
				this.$utils.Scan(URL, data => {
					console.log(data);
					if (e.Other == 'BD_STORE') {
						that.formVal[e.ID] = data.STORENAME;
						if (e.ID == 'INSTORENAME') {
							that.formVal.PK_INSTORE = data.PK_STORE
						} else {
							that.formVal.PK_STORE = data.PK_STORE
						}
					} else if (e.Other == 'BD_RACK') {
						// data.myID = e.ID  
						that.formVal[e.ID] = data.STATIONNAME;
						if (e.ID == 'INSTATIONNAME') {
							that.formVal.PK_INSTATION = data.PK_STATION
						} else {
							that.formVal.PK_STATION = data.PK_STATION;
						}
					}
				});
			},
			
			// 扫描设备
			openScanSBMater() {
				let that = this;
				this.$utils.openScanUtils(0, 0, (res) => {
					console.log(999, res);
					if (res.includes('TYPE:8')) {
						let arr = res.split('|');
						that.formVal.EQUIPNAME = arr[1]
						that.formVal.PK_EQUIP = arr[2]
						
					} else {
						this.$utils.tips('非设备二维码,无法使用')
					}
				})
			},
			// 扫码物资，进行校验
			handelScanCheck(e) {
				let URL = this.userInfo.BaseURL + '/api/APPCommon/ScanCode';
				// console.log(URL);
				let that = this;
				this.$utils.Scan(URL, data => {
					// console.log(data);
					if (data.PK_MATERIAL == that.formVal.PK_MATERIAL) {
						that.formVal[e.ID] = true
					} else {
						return that.$utils.tips('物资不匹配！')
					}
				})
			},

			// 图片上传
			uploadImg(e) {
				let that = this;
				this.$utils.uploadImg( res => {
					that.formVal[e.ID] = res
				})
			},

			previewImage(path) {
				let imglist = this.planList[i].INPHOTO;

				this.$utils.previewImage(path);
			}
		}
	};
</script>

<style lang="scss">
	uni-picker {
		width: 100%;
	}

	.downIcon {
		right: 0;
	}

	.table-row {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f1f1f1;
		align-items: center;

		.row-label {
			flex: 0 0 150rpx;
		}

		.flag-must::before {
			content: "*";
			color: red;
			position: absolute;
			left: 12rpx;
			margin-top: 10rpx;
		}

		.uni-picker {
			width: 100%;
		}

		.row-value {
			flex: 1;
			display: flex;
			align-items: center;

			.row-img {
				flex: 1;

				image {
					width: 200rpx;
					height: 50rpx;
				}
			}

			input {
				flex: 1;
				font-size: 35rpx;
			}

			button {
				line-height: 1.9 !important;
				padding: 0 1em !important;
			}
		}
	}

	.table-row:focus-within {
		border-bottom: 1rpx solid #1677ff;
	}
</style>